
// 初始化ECharts实例
const hourChart = echarts.init(document.getElementById('hourChart'));
const minuteChart = echarts.init(document.getElementById('minuteChart'));
const secondChart = echarts.init(document.getElementById('secondChart'));

// 获取DOM元素
const timeDisplay = document.getElementById('timeDisplay');
const timeFormatRadios = document.querySelectorAll('input[name="timeFormat"]');
const dayValue = document.getElementById('dayValue');
const hourValue = document.getElementById('hourValue');
const minuteValue = document.getElementById('minuteValue');
const secondValue = document.getElementById('secondValue');

// 初始配置
let timeFormat = '12'; // 12 or 24

// 基础配置 - 完整的圆形仪表盘
const createOption = (max, name, colorStops) => ({
	backgroundColor: 'transparent',
	series: [
		{
			name: name,
			type: 'gauge',
			radius: '100%',
			startAngle: 0,
			endAngle: 360,
			min: 0,
			max: max,
			progress: {
				show: true,
				width: 12,
				roundCap: true,
				itemStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 1,
						y2: 0,
						colorStops: colorStops
					}
				}
			},
			axisLine: {
				lineStyle: {
					width: 12,
					color: [[1, 'rgba(255, 255, 255, 0.8)']]
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLabel: {
				show: false
			},
			pointer: {
				show: false
			},
			anchor: {
				show: false
			},
			detail: {
				valueAnimation: true,
				formatter: '{value}',
				color: '#ff6b9d',
				fontSize: 20,
				offsetCenter: [0, 0],
				fontWeight: 'bold'
			},
			data: [
				{
					value: 0,
					name: name
				}
			]
		}
	]
});

// 初始化图表
const hourOption = createOption(24, '小时', [
	{ offset: 0, color: '#ffb6c1' },
	{ offset: 1, color: '#ff6b9d' }
]);

const minuteOption = createOption(60, '分钟', [
	{ offset: 0, color: '#ff8fb1' },
	{ offset: 1, color: '#ff6b9d' }
]);

const secondOption = createOption(60, '秒钟', [
	{ offset: 0, color: '#ff6b9d' },
	{ offset: 1, color: '#ff4785' }
]);

hourChart.setOption(hourOption);
minuteChart.setOption(minuteOption);
secondChart.setOption(secondOption);

// 更新图表函数
function updateCharts() {
	const now = new Date();
	let hourVal, minuteVal, secondVal;

	// 根据选择的时间格式设置小时值
	if (timeFormat === '12') {
		hourVal = now.getHours() % 12 || 12;
	} else {
		hourVal = now.getHours();
	}

	minuteVal = now.getMinutes();
	secondVal = now.getSeconds();

	// 更新时间显示
	let displayTime;
	if (timeFormat === '12') {
		displayTime = now.toLocaleTimeString('en-US', { hour12: true });
	} else {
		displayTime = now.toLocaleTimeString('en-US', { hour12: false });
	}
	timeDisplay.textContent = displayTime;

	// 更新详细时间信息 - 修改了天数的计算方式
	const dayOfYear = Math.floor((now - new Date(now.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24));
	dayValue.textContent = dayOfYear;
	hourValue.textContent = String(now.getHours()).padStart(2, '0');
	minuteValue.textContent = String(now.getMinutes()).padStart(2, '0');
	secondValue.textContent = String(now.getSeconds()).padStart(2, '0');

	// 更新图表数据
	hourOption.series[0].data[0].value = hourVal;
	minuteOption.series[0].data[0].value = minuteVal;
	secondOption.series[0].data[0].value = secondVal;

	// 应用配置
	hourChart.setOption(hourOption);
	minuteChart.setOption(minuteOption);
	secondChart.setOption(secondOption);
}

// 初始化图表
updateCharts();

// 添加事件监听器
timeFormatRadios.forEach(radio => {
	radio.addEventListener('change', function () {
		timeFormat = this.value;
		updateCharts();
	});
});

// 每秒更新一次图表
setInterval(updateCharts, 1000);

// 响应窗口大小变化
window.addEventListener('resize', function () {
	hourChart.resize();
	minuteChart.resize();
	secondChart.resize();
});
